<template>
  <el-dialog title="详细信息" :visible.sync="dialogVisible" class="dialog">
    <el-descriptions v-if="info.id" direction="vertical" :column="2" border>

      <el-descriptions-item label="产品名称">{{ info.name }}</el-descriptions-item>
      <el-descriptions-item label="产品类型">限购金额</el-descriptions-item>
      <el-descriptions-item label="产品id">{{ info.id }}</el-descriptions-item>

      <el-descriptions-item label="产品类别Icon">
        <el-image style="width: 100px; height: 100px" :src="info.cover" :preview-src-list="[info.cover]" />
      </el-descriptions-item>
      <el-descriptions-item label="产品内容封面">
        <el-image style="width: 100px; height: 100px" :src="info.picture" :preview-src-list="[info.picture]" />
      </el-descriptions-item>
      <el-descriptions-item label="利息">{{ info.interest }}</el-descriptions-item>
      <el-descriptions-item label="是否新手产品">{{ info.isRookiePro == '1' ? '是' : '否' }}</el-descriptions-item>
      <el-descriptions-item label="是否上架">{{ info.status == '1' ? '上架' : '下架' }}</el-descriptions-item>
      <el-descriptions-item label="排序">{{ info.sort }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" class="gg" :title="'定期' + (index + 1)" :column="2" border
      v-for="(item, index) in info.lockDayConfig" :key="index">

      <el-descriptions-item label="定期时长">{{ item.lockDay }}</el-descriptions-item>
      <el-descriptions-item label="返回比率">{{ item.returnRate }}</el-descriptions-item>


    </el-descriptions>
    <el-descriptions direction="vertical" class="gg" :title="'规格' + (index + 1)" :column="3" border
      v-for="(item, index) in info.limitMoney" :key="index">

      <el-descriptions-item label="复购起步金额">{{ item.reinvestAmount }}</el-descriptions-item>
      <el-descriptions-item label="最高金额">{{ item.maxAmount }}</el-descriptions-item>
      <el-descriptions-item label="最低金额">{{ item.minAmount }}</el-descriptions-item>
      <el-descriptions-item label="总限购金额">{{ item.sumLimitMoney }}</el-descriptions-item>
      <el-descriptions-item label="日利率">{{ item.interest }}</el-descriptions-item>

      <el-descriptions-item label="状态">{{ setStatusStr(item.status) }}</el-descriptions-item>

    </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { _isMobile } from '@/utils/index'
export default {
  data() {
    return {
      dialogVisible: false,
      info: {},
      isMobile: _isMobile
    }
  },

  methods: {
    show(e) {
      console.log(e)
      this.dialogVisible = true
      this.info = e
    },
    setStatusStr(status) {
      let str = ''
      switch (status) {
        case 'sold_out':
          str = '已售罄'
          break
        case 'hot_selling':
          str = '热销中'
          break
        case 'not_open':
          str = '未开放'
          break
      }
      return str
    }
  }
}
</script>
<style>
.gg {
  margin-top: 30px;
}
</style>
